<template>
  <div class="bg-box">
    <div
      v-for="i in imgNum"
      :key="'bg_' + i"
      :class="`bg-item bg-${i}`"
    >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Background extends Vue {
  private imgNum: number = 6
}
</script>

<style lang="scss" scoped>
.bg-item {
  height: 1080px;
  width: 100%;
  font-size: 2rem;
  text-align: center;
  line-height: 1080px;
  font-weight: 900;
}
@for $i from 1 through 6 {
  .bg-#{$i} {
    background: #fff
      url('~assets/images/image_#{$i}.jpg')
      fixed
      no-repeat
      center /
      cover;
  }
}
</style>
